<template>
  <div>
    <el-row :gutter="3">
      <div class="block">
        <span class="demonstration">请选择图书分类<n></n></span>
        <el-cascader clearable v-model="value" :options="options" :props="props" @change="handleChange">
        </el-cascader>
      </div>
    </el-row>
    <el-row :gutter="3">
      <el-button type="warning" plain @click="disableCategory">禁用分类</el-button>
      <el-button type="success" plain @click="enableCategory">启用分类</el-button>
    </el-row>
    <el-row :gutter="3">
      <el-col :span="10" :offset="6">
        <el-input type="text" v-model="bookInfo.bookShowname" placeholder="请输入显示名字"></el-input>
      </el-col>
    </el-row>
    <el-row :gutter="3">
      <el-col :span="10" :offset="6">
      <el-input type="text" v-model="bookInfo.bookName" placeholder="请输入图书名字"></el-input>
      </el-col>
    </el-row>
    <el-row :gutter="3">
      <el-col :span="10" :offset="6">
        <el-input type="text" placeholder="请输入作者" v-model="bookInfo.bookAuth"></el-input>
      </el-col>
    </el-row>
    <el-row :gutter="3">
      <el-col :span="10" :offset="6">
        <el-input type="text" placeholder="请输入出版社" v-model="bookInfo.bookPress" ></el-input>
      </el-col>
    </el-row>
    <el-row :gutter="3">
      <el-col :span="10" :offset="6">
        <el-input type="text" placeholder="请输入单价" v-model="bookInfo.bookprice"></el-input>
      </el-col>
    </el-row>

    <div class="block">
      <el-date-picker v-model="bookInfo.pressDate" align="right"
      value-format="yyyy-MM-dd"
       type="date" placeholder="选择出版日期" :picker-options="pickerOptions">
      </el-date-picker>
    </div>

    <el-row :gutter="3">
      <el-upload class="upload-demo"
      ref="upload"
      action="http://localhost:8111/bookInfo/uploadBook"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :headers="headers"
      :data="bookInfo"
      :auto-upload="false">
      <el-button slot="trigger" size="small" type="primary">选取图书封面</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </el-row>

  </div>
</template>

<script>
 export default {
   name: "BookType",
   data() {
     return {
       headers:{
         token: localStorage.getItem("token"),
       },
       bookInfo: {
         typeId: null, // 初始为 null，稍后在 handleChange 中设置
         bookShowname: "",
         bookName: '',
         bookAuth: '', // 作者
         bookPress: '', // 出版社
         bookprice: '', // 单价
         pressDate:'', // 出版时间
       },
       pickerOptions: {
         disabledDate(time) {
           return time.getTime() > Date.now();
         },
         shortcuts: [{
             text: '今天',
             onClick(picker) {
               picker.$emit('pick', new Date());
             }
           },
           {
             text: '昨天',
             onClick(picker) {
               const date = new Date();
               date.setTime(date.getTime() - 3600 * 1000 * 24);
               picker.$emit('pick', date);
             }
           },
           {
             text: '一周前',
             onClick(picker) {
               const date = new Date();
               date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
               picker.$emit('pick', date);
             }
           }
         ]
       },
       fileList: [],
       value: [], // 选择的路径，最后一项是最终选择的节点ID
       options: [], // 级联选择框的数据选项
       props: {
         value: "typeId", // 数据选项中代表值的属性
         label: "typeName", // 数据选项中代表标签的属性
         children: "children", // 数据选项中代表子节点的属性
         checkStrictly: true, // 允许节点单独选择
       },
     };
   },
   methods: {
     submitUpload() {
       this.$refs.upload.submit();
     },
     handleRemove(file, fileList) {
       console.log(file, fileList);
     },
     handlePreview(file) {
       console.log(file);
     },
     getBookType() {
       this.$http.post("/bookType/selectBookType").then(resp => {
         console.log("响应数据:", resp);
         this.options = resp.data.data;
       });
     },
     handleChange(value) {
       console.log('已选择的值: ', value);
       // 更新 bookInfo.typeId
       this.bookInfo.typeId = value[value.length - 1];
     },
     disableCategory() {
       if (this.value.length === 0) {
         this.$message.warning('请选择要禁用的分类');
         return;
       }
       const selectedId = this.value[this.value.length - 1];
       console.log('准备禁用的分类ID: ', selectedId);

       const form = new FormData();
       form.append("id", selectedId);
       this.$http.post("/bookType/disableCategories", form)
         .then(resp => {
           this.$message.success('禁用成功');
         })
         .catch(error => {
           console.error('禁用请求失败：', error);
           this.$message.error('操作失败');
         });
     },
     enableCategory() {
       if (this.value.length === 0) {
         this.$message.warning('请选择要启用的分类');
         return;
       }
       const selectedId = this.value[this.value.length - 1];
       console.log('准备启用的分类ID: ', selectedId);

       this.$http.post("/bookType/enableCategories", {
           id: selectedId
         })
         .then(resp => {
           this.$message.success('启用成功');
         })
         .catch(error => {
           console.error('启用请求失败：', error);
           this.$message.error('操作失败');
         });
     }
   },
   created() {
     this.getBookType();
   },
 };
</script>

<style scoped>
  .block {
    padding: 10px;
  }

  .el-row {
    margin: 20px;
  }
</style>
